<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/" xmlns:p="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>用户信息列表展示页</title>
    <!-- 关键代码 -->
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}">
</head>
<body>
<table border="1" class="table table-striped text-center">
    <tr>
        <th>No.</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品图片</th>
        <th>商品类型</th>
        <th>操作</th>
    </tr>
    <tr th:each="good, goods : ${pageInfo.list}">
        <td th:text="${good.goodsId}"></td>
        <td th:text="${good.goodsName}"></td>
        <td th:text="${good.goodsPrice}"></td>
        <td th:text="${good.goodsNum}"></td>
        <td>
            <span th:if="${good.goodsImg eq null}">
                <a th:href="@{/goods/show_one_good/{goodsId}(goodsId=${good.goodsId})}">
                    <img th:src="@{/tmp/wsc.jpg}" /></a>
            </span>
            <span th:unless="${good.goodsImg eq null}">
                <a th:href="@{/goods/show_one_good/{goodsId}(goodsId=${good.goodsId})}">
                <img width="100px" height="100px" th:src="@{${good.goodsImg}}" /></a>
            </span>
        </td>
        <td th:text="${good.goodsType}"></td>
        <td>
            <span><a th:href="@{/good/toupdate/{id}(id=${good.goodsId})}" onclick="refresh()">修改</a></span>
            <span><a th:href="@{/good/tosave}">添加</a></span>
            <span><a th:href="@{/good/deleteById/{id}(id=${good.goodsId})}">删除</a></span>
        </td>
    </tr>
</table>
<div id="page‐div">
<span>
<a th:href="@{/goods/show_all_goods/1}">首页</a>
<a th:href="@{/goods/show_all_goods/{pageNum}(pageNum=${pageInfo.getPageNum() - 1})}">上一页</a>
<a th:href="@{/goods/show_all_goods/{pageNum}(pageNum=${pageInfo.getPageNum() == pageInfo.getPages() ? pageInfo.getPages() :pageInfo.getPageNum() + 1})}">下一页</a>
<a th:href="@{/goods/show_all_goods/{pageNum}(pageNum=${pageInfo.getPages()})}">尾页</a>
</span>&nbsp;&nbsp;
    <span>
<label>当前第&nbsp;</label><em th:text="${pageInfo.getPageNum()}"></em><label>&nbsp;页,
</label>
<label>共&nbsp;</label><em th:text="${pageInfo.getPages()}"></em><label>&nbsp;页
</label>
    <label>&nbsp;&nbsp;跳转到第&nbsp;</label><input id="page-input" /><label>&nbsp;页</label>
    <a href="javascript:void(0)" th:onclick="toPage()">跳转</a>
</span>
</div>
</body>
<script th:inline="javascript">
    function toPage() {
        let pageNum = document.getElementById("page-input").value;
        if(pageNum > [[${pageInfo.getPages()}]])
            pageNum = [[${pageInfo.getPages()}]];
        /*<![CDATA[*/
        let toPageHref = /*[[@{/good/queryByPage/{curPage}(curPage=*/"" + pageNum + /*)}]]*/"";
        /*]]>*/
        location.href = toPageHref;
    }
</script>
<script>
    function refresh(){
        window.location.reload();
    }
</script>
</html>
